<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #top-box{
            position: fixed;
            right: 10px;
            bottom: 10px;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>

    <div id="app">
        1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>
        1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>
        1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>1<br/>2<br/>3<br/>
        <div id="top-box" v-top>

        </div>
    </div>
   
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                url:"./imgs/1.jpg",
                username:"王一星"
            },
            directives:{
                top:{
                    bind:function(el){
                        el.onclick = function(){
                            document.body.scrollTop = 0;
                            document.documentElement.scrollTop = 0;
                        }
                    }
                }
            },
            methods:{
                changeUrl(){
                   this.url="./imgs/2.jpg";
                }
            }
        });


    </script>
</body>
</html>